<template>
    <div class="upload-to-server">
        <background></background>
        <operation>
            <template slot="right">
                <el-tag v-if="activeOptionProject" class="option-tag" v-text="activeOptionProject"
                        type="success" size="mini"></el-tag>
                <el-input v-if="option.host" class="option-input" v-model="option.host"
                          size="mini" disabled></el-input>
                <el-button class="setting-btn" type="text" size="small"
                           icon="el-icon-setting" @click="settingClick"></el-button>
            </template>
        </operation>

        <upload-to-server-drag-upload class="upload" @files="onFiles"></upload-to-server-drag-upload>

        <div class="container">
            <el-select class="select" v-model="path" filterable value="">
                <el-option v-for="path in option.paths" :key="path" :label="path" :value="path"></el-option>
            </el-select>
            <el-button @click="uploadClick" v-loading="loading">UPLOAD</el-button>
        </div>

        <!--dialog-->
        <template>
            <upload-to-server-project-management-dialog
                    v-model="dialog.visible"
                    v-if="dialog.visible"
                    :type="dialog.type"
                    @save="loadOption"/>
        </template>

    </div>
</template>

<script type="text/ecmascript-6">
  import { R, Key } from '#/r';
  import client from 'scp2';

  import Background from "../../components/common/Background";
  import Operation from "../../components/common/Operation";
  import UploadToServerDragUpload from "../../components/upload-to-server/DragUpload";
  import UploadToServerProjectManagementDialog from "../../components/upload-to-server/ProjectManagementDialog";

  /**
   * @author 白雨浓
   * @date 2018/10/17 10:40
   *
   * 文件上传至服务器
   **/
  export default {
    name: 'UploadToServer',
    components: {UploadToServerProjectManagementDialog, UploadToServerDragUpload, Operation, Background},
    data() {
      return {
        dialog: {
          visible: false,
        },
        loading: false,
        option: {},
        activeOptionProject: '',
        path: '',
        files: []
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.loadOption();
      })
    },
    methods: {
      loadOption() {
        const options = this.$storage.local.getItem(Key.local.UPLOAD_TO_SERVER_OPTION);
        const activeOptionProject = this.$storage.local.getItem(Key.local.UPLOAD_TO_SERVER_ACTIVE_PROJECT);

        if (options && activeOptionProject && options[activeOptionProject]) {
          this.option = options[activeOptionProject];
          this.activeOptionProject = activeOptionProject;
        }
      },
      settingClick() {
        this.dialog = {
          visible: true,
          type: R.dialog.EDIT
        }
      },
      async uploadClick() {
        if (this.files.length === 0) {
          return;
        }
        if (!this.option.host || !this.path) {
          return;
        }

        const config = {
          host: this.option.host,
          port: this.option.port,
          username: this.option.username,
          password: this.option.password,
          path: this.path,
        };

        this.loading = true;
        try {
          for (const file of this.files) {
            await this.scp(file.path, config);
          }
          this.$notify.success({title: '成功', message: '上传成功'})
        } catch (e) {
          console.log(e);
          this.$notify.error({title: '错误', message: e})
        }
        this.loading = false;
      },
      onFiles(files) {
        this.files = files;
      },
      scp(path, config) {
        return new Promise((resolve, reject) => {
          client.scp(path, config, err => {
            if (err) {
              return reject(err);
            }
            return resolve();
          })
        });
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .upload-to-server {
    }

    .upload {
        margin-top 20px
    }

    .option-tag {
        margin-right 5px
    }

    .option-input {
        width 200px
        margin-right 10px
    }

    .setting-btn {
        color white
    }

    .container {
        display flex
        justify-content space-between
        width 620px
        margin 20px auto
    }

    .select {
        width 350px
    }
</style>
